<template>
	<view class="container">
		<picker @change="changeUser" mode="selector" :value="userIndex" :range="users" range-key="name">
			<view class="picker flex-row">{{ userIndex >= 0 ? users[userIndex].name : '请选择用户' }}</view>
		</picker>
		<button @tap="login" class="btn" type="primary">登录</button>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import IM from '@/common/xbcim'

/**
 * 这里的users是公共体验账号下内置的三个用户
 * 请不要修改数据，感谢配合，真实对接的时候是不需要这个数据的
 */
const users = ref([
	{userId: 1, name: '张三'},
	{userId: 2, name: '李四'},
	{userId: 3, name: '王五'},
])
const userIndex = ref(-1)

// 选择用户
function changeUser(e){
	userIndex.value = e.detail.value
}

// 执行登录
function login(){
	/**
	 * 获取当前业务系统用户信息
	 * 此处通过下来选择来模拟的用户登录
	 */
	const user = users.value[userIndex.value]
	const { userId, name } = user
	
	// 缓存用户数据：userId一定要缓存，其他地方需要用到
	uni.setStorageSync('user', user)
	uni.setStorageSync('userId', userId)
	
	// 注册用户到IM
	IM.register({
		userId,
		name
	}).then(()=>{
		// 初始化IM
		IM.init().then(()=>{
			// 跳转首页
			uni.switchTab({
				url: '/pages/chat/index'
			})
		})
	}).catch(err=>{
		console.log(err)
	})
}
</script>

<style lang="scss" scoped>
.container {
	padding: 40rpx;
	
	.picker {
		height: 80rpx;
		padding: 0 20rpx;
		margin-bottom: 40rpx;
		border: 2rpx solid #999;
	}
	
	.btn{
		border-radius: 0;
	}
}
</style>